<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.container{
				position: absolute;
				left: 50%;
				top: 50%;
				width:100px;
				height: 100px;
				transform: translate(-50%,-50%);
				perspective:200;
				-webkit-perspective:200; // 设置元素被查看位置的视图
			}
			.box{
				position: relative;
				width:100px;
				height: 100px;
				transform-style: preserve-3d;
				transform-origin: center center -50px;
				animation: boxRotate 6s ease-in-out infinite;
			}
			.rect{
				position: absolute;
				width:100px;
				height: 100px;
				background: rgba(0,0,0,0.5);
				transform: translateZ(0px) rotateY(0deg);
				animation: faceMove1 6s ease-in-out infinite;
			}
			.rect2{
				transform-origin: left center;
				transform: translate(100px) rotateY(90deg);
				background-color: rgba(34, 159, 79, 0.5);
				animation: faceMove2 6s ease-in-out infinite;
			}
			.rect3{
				transform-origin: top center;
				transform: translateY(100px) rotateX(-90deg);
				background-color: rgba(30, 73, 229, 0.5);
				animation: faceMove3 6s ease-in-out infinite;
			}
			.rect4{
				transform-origin: right center;
				transform: translateX(-100px) rotateY(-90deg);
				background-color: rgba(25, 212, 221, 0.5);
				animation: faceMove4 6s ease-in-out infinite;
			}
			.rect5{
				transform-origin: bottom center;
				transform: translateY(-100px) rotateX(90deg);
				background-color: rgba(182, 31, 170, 0.5);
				animation: faceMove5 6s ease-in-out infinite;
			}
			.rect6{
				transform: translate3d(0,0,-100px);
				background-color: rgba(246, 192, 39, 0.5);
				animation: faceMove6 6s ease-in-out infinite;
			}
			@-webkit-keyframes boxRotate{
				0%{
					transform: rotateX(0deg);
				}
				33%{
					transform: rotateX(180deg);
				}
				66%{
					transform: rotateX(180deg) rotateY(180deg);
				}
				100%{
					transform: rotateX(360deg) rotateY(360deg);
				}
			}
			@-webkit-keyframes faceMove1{
				0%,100%{
					transform: translate3d(0,0,0px);
				}
				33%{
					transform: translate3d(0,0,50px);
				}
				66%{
					transform: translate3d(0,0,100px);
				}
				
			}
			@-webkit-keyframes faceMove2{
				0%,100%{
					transform: translate(100px) rotateY(90deg);
				}
				33%{
					transform: translate(150px) rotateY(90deg);
				}
				66%{
					transform: translate(200px) rotateY(90deg);
				}
				
			}
			@-webkit-keyframes faceMove3{
				0%,100%{
					transform: translateY(100px) rotateX(-90deg);
				}
				33%{
					transform: translateY(150px) rotateX(-90deg);
				}
				66%{
					transform: translateY(200px) rotateX(-90deg);
				}
			}
			@-webkit-keyframes faceMove4{
				0%,100%{
					transform: translateX(-100px) rotateY(-90deg);
				}
				33%{
					transform: translateX(-150px) rotateY(-90deg);
				}
				66%{
					transform: translateX(-200px) rotateY(-90deg);
				}
			}
			@-webkit-keyframes faceMove5{
				0%,100%{
					transform: translateY(-100px) rotateX(90deg);
				}
				33%{
					transform: translateY(-150px) rotateX(90deg);
				}
				66%{
					transform: translateY(-200px) rotateX(90deg);
				}
			}
			@-webkit-keyframes faceMove6{
				0%,100%{
					transform: translate3d(0,0,-100px);
				}
				33%{
					transform: translate3d(0,0,-150px);
				}
				66%{
					transform: translate3d(0,0,-200px);
				}
			}
			
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">
				<div class="rect rect1"></div>
				<div class="rect rect2"></div>
				<div class="rect rect3"></div>
				<div class="rect rect4"></div>
				<div class="rect rect5"></div>
				<div class="rect rect6"></div>
			</div>
		</div>
	</body>
</html>
